<template>
  <custom-modal-page :visible.sync="visible">
    <div
      class="enter-container animate__faster animate__animated animate__fadeIn"
    >
      <div class="zhgd-data-report-header">
        <div class="title">查看</div>
        <a-button @click="goBack" class="back-button"> 返回 </a-button>
      </div>
      <div class="data-report">
        <a-form-model ref="form" :model="form" :colon="false">
          <a-collapse v-model="activeKey">
            <a-collapse-panel key="1" :show-arrow="false">
              <!-- 自定义头部左边 -->
              <template slot="header">
                <div @click.stop class="customize-text" header="试验信息"></div>
              </template>
              <!-- 自定义头部右边边 -->
              <template slot="extra">
                <div class="customize-extra">
                  {{ activeKey.includes("1") ? "收起" : "展开" }}
                  <div
                    class="icon"
                    :class="[activeKey.includes('1') && 'active']"
                  >
                    <bj-icon-font type="xl" color="#3759A0" :size="10">
                    </bj-icon-font>
                  </div>
                </div>
              </template>
              <!-- 内容区域 -->
              <div>
                <!-- 表格一 -->
                <vxe-table
                  class="scrollbarStyle"
                  align="center"
                  :data="data"
                  :column-config="{ resizable: true }"
                >
                  <vxe-column title="工程部位" min-width="200">
                    <template slot-scope="scope">
                      <span>
                        {{ scope.row.pierName }}
                        {{ scope.row.otherLocation }}
                      </span>
                    </template>
                  </vxe-column>
                  <vxe-column
                    field="judgeBasis"
                    title="判定依据"
                    min-width="200"
                  ></vxe-column>
                  <vxe-column
                    field="produceDate"
                    title="制件日期"
                    min-width="200"
                  ></vxe-column>
                  <vxe-column
                    field="strengthGrade"
                    title="设计强度"
                    min-width="200"
                  ></vxe-column>
                  <vxe-column
                    field="size"
                    title="试件尺寸"
                    min-width="200"
                  ></vxe-column>
                  <vxe-column
                    field="trialDate"
                    title="检测时间"
                    min-width="200"
                  ></vxe-column>
                </vxe-table>
              </div>
            </a-collapse-panel>
            <a-collapse-panel key="2" :show-arrow="false">
              <!-- 自定义头部左边 -->
              <template slot="header">
                <div @click.stop class="customize-text" header="检测结果">
                  <div class="header-txt">
                    <span
                      class="collapse-taskNum"
                      :header="'试验单号：' + testNum"
                    >
                    </span>
                    <a-button-group>
                      <a-button
                        :type="activeIndex == index ? 'primary' : ''"
                        v-for="(item, index) in result"
                        :key="index"
                        @click.stop.prevent="groupClick(item, index)"
                      >
                        第{{ index + 1 }}组
                      </a-button>
                    </a-button-group>
                  </div>
                </div>
              </template>
              <!-- 自定义头部右边边 -->
              <template slot="extra">
                <div class="customize-extra">
                  {{ activeKey.includes("2") ? "收起" : "展开" }}
                  <div
                    class="icon"
                    :class="[activeKey.includes('2') && 'active']"
                  >
                    <bj-icon-font type="xl" color="#3759A0" :size="10">
                    </bj-icon-font>
                  </div>
                </div>
              </template>
              <!-- 内容区域 -->
              <div>
                <vxe-table
                  v-show="activeIndex != '-1'"
                  class="scrollbarStyle"
                  align="center"
                  :data="tableData"
                  :column-config="{ resizable: true }"
                >
                  <vxe-column type="seq" width="80" title="序号"></vxe-column>
                  <vxe-column
                    field="trialName"
                    title="试验项目"
                    min-width="200"
                  >
                  </vxe-column>
                  <vxe-column
                    field="curingAge"
                    title="养护龄期"
                    min-width="200"
                  ></vxe-column>
                  <vxe-column
                    field="trialUnit"
                    title="单位"
                    min-width="200"
                  ></vxe-column>
                  <vxe-column
                    field="standardValue"
                    title="技术指标"
                    min-width="200"
                  ></vxe-column>
                  <vxe-column
                    field="testValue"
                    title="实测结果"
                    min-width="200"
                  >
                  </vxe-column>
                  <vxe-column field="result" title="结果判定" min-width="200">
                    <template slot-scope="scope">
                      <span v-if="scope.row.result == '-1'">实测</span>
                      <span v-if="scope.row.result == 0">合格</span>
                      <span v-if="scope.row.result == 1">不合格</span>
                      <span v-if="scope.row.result == 2">试验数据无效</span>
                    </template>
                  </vxe-column>
                  <vxe-column
                    field="dataSource"
                    title="数据来源"
                    min-width="200"
                  >
                    <template slot-scope="scope">
                      <span v-if="scope.row.dataSource == 0">手动录入</span>
                      <span v-if="scope.row.dataSource == 1">物联网数据</span>
                    </template>
                  </vxe-column>
                  <vxe-column
                    field="operate"
                    width="150"
                    title="操作"
                    fixed="right"
                  >
                    <template #default="{ row }">
                      <div class="text-button-group">
                        <a-button
                          type="text"
                          @click="detail(row)"
                          v-if="row.dataSource == 1"
                          >查看</a-button
                        >
                      </div>
                    </template>
                  </vxe-column>
                </vxe-table>
                <!-- 任务单 -->
                <vxe-table
                  v-show="activeIndex == '-1'"
                  class="scrollbarStyle"
                  align="center"
                  :data="tableData"
                  :column-config="{ resizable: true }"
                >
                  <vxe-column type="seq" width="80" title="序号"></vxe-column>
                  <vxe-column
                    field="trialName"
                    title="试验项目"
                    min-width="200"
                  >
                  </vxe-column>
                  <vxe-column field="equName" title="设备名称" min-width="200">
                  </vxe-column>
                  <vxe-column field="taskNum" title="任务单号" min-width="200">
                  </vxe-column>
                  <vxe-column field="state" title="试验状态" min-width="200">
                    <template #default="{ row }">
                      <span v-if="row.state == '-1'">已废弃</span>
                      <span v-if="row.state == 0">未下发</span>
                      <span v-if="row.state == 1">已下发</span>
                      <span v-if="row.state == 2">已试验</span>
                      <span v-if="row.state == 3">
                        不可下发(委托单信息不完整)
                      </span>
                    </template>
                  </vxe-column>
                  <vxe-column field="result" title="试验结果" min-width="200">
                    <template slot-scope="scope">
                      <span v-if="scope.row.result == '-1'">实测</span>
                      <span v-if="scope.row.result == 0">合格</span>
                      <span v-if="scope.row.result == 1">不合格</span>
                      <span v-if="scope.row.result == 2">试验数据无效</span>
                    </template>
                  </vxe-column>
                </vxe-table>
              </div>
            </a-collapse-panel>
          </a-collapse>
        </a-form-model>
        <detail-model
          :visible.sync="modalVisible"
          :modalTrialNum="modalTrialNum"
          :parentTrialNum="trialNum"
          :id="modalId"
        >
        </detail-model>
      </div>
    </div>
  </custom-modal-page>
</template>
<script>
import {
  getListByTaskNum,
  getTestDataListByTaskNum,
  commissionDetail,
} from "@/api/wisdom-beam/trial-app";
import DetailModel from "../components/DetailModel.vue";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    trialId: {
      type: [String, Number],
      default: "",
    },
    trialNum: {
      type: [String, Number],
      default: "",
    },
  },
  components: {
    DetailModel,
  },
  data() {
    return {
      id: "",
      loading: false,
      form: {
        reportId: "",
        testNum: "",
        trialDate: "",
        dataList: [],
      },
      activeKey: ["1", "2"],
      data: [],
      table: [],
      testNum: "",
      result: [],
      activeIndex: 0,
      tableData: [],
      modalVisible: false,
      modalTrialNum: "",
      modalId: "",
      componentName: "",
      dataSource: "",
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          let { trialId, trialNum } = this;
          this.componentName = trialNum;
          this.id = trialId;
          this.getData();
        }
      },
      immediate: true,
    },
  },

  methods: {
    //详情
    detail(row) {
      this.modalVisible = true;
      this.modalId = row.id;
      this.modalTrialNum = row.trialNum;
    },
    //任务单
    group() {
      this.activeIndex = "-1";
      new Promise((resolve, reject) => {
        getTestDataListByTaskNum({ reportId: this.id })
          .then((res) => {
            let { data } = res;
            this.tableData = data.result;
            resolve();
          })
          .catch((_) => {
            reject();
          });
      });
    },
    //组切换
    groupClick(v, i) {
      this.activeIndex = i;
      this.testNum = v.testNum;
      this.getTaskNum();
    },
    //返回
    goBack() {
      this.$emit("update:visible", false);
    },
    //查询页面数据
    getData() {
      this.loading = true;
      Promise.all([this.getDetail()]).finally((_) => {
        this.loading = false;
      });
    },
    //查询检测结果
    getTaskNum() {
      new Promise((resolve, reject) => {
        getListByTaskNum({ reportId: this.id, testNum: this.testNum })
          .then((res) => {
            let { data } = res;
            this.tableData = data.result;
            resolve();
          })
          .catch((_) => {
            reject();
          });
      });
    },
    //查询详情
    getDetail() {
      new Promise((resolve, reject) => {
        commissionDetail(this.id)
          .then((res) => {
            let { data } = res;
            this.data = [];
            this.table = [];
            this.form.trialDate = data.result.trialDate;
            this.dataSource = data?.result?.dataSource ?? {};
            this.data.push(data.result);
            this.result = data?.result?.testSingleList || [];
            try {
              this.testNum = this.result[0].testNum;
              this.getTaskNum();
            } catch {}
            resolve();
          })
          .catch((_) => {
            reject();
          });
      });
    },
  },
};
</script>
<style lang="less" scoped>
.back-button {
  color: var(--primary-color);
  background: #f1f2f7 !important;
  border: none;
}
.enter-container {
  height: 100%;
  padding: 10px;
  .flex();
  flex-direction: column;
  .zhgd-data-report-header {
    .flex();
    justify-content: space-between;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #525a5d;
    &::before {
      display: none;
    }
  }
  .data-report {
    background-color: #fff;
    flex: 1;
    height: 100%;
    .custom-scrollbar();
    .ant-btn-group {
      .ant-btn + .ant-btn {
        margin-left: -6px;
      }
    }
    //折叠面板
    /deep/.ant-collapse {
      border-top: 2px solid #f3f4f6;
    }
    .header-txt {
      flex: 1;
      .flex();
      align-items: center;
      justify-content: space-between;
      .collapse-taskNum {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #3759a0;
        &::before {
          content: attr(header);
          height: 16px;
          padding-left: 10px;
        }
      }
    }

    .form-footer {
      .flex();
      justify-content: center;
      align-items: center;
      padding: 20px;
    }
  }
}
/deep/.ant-form-item {
  display: flex;
  margin-bottom: 0;
  .ant-form-item-label {
    width: 30px;
    min-width: 30px;
    white-space: pre-wrap;
    display: flex;
    justify-content: flex-end;
    line-height: 20px;
    align-items: center;
    height: 36px;
    label {
      color: #999999;
    }
  }
  .check-item-select {
    height: 126px;
    .ant-select-selection__rendered {
      height: 126px;
      .ant-select-selection__placeholder {
        margin-top: -40px !important;
      }
    }
  }

  .ant-form-item-control-wrapper {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
/deep/.ant-calendar-picker {
  width: 100%;
  min-width: unset !important;
}
//按钮
/deep/.vxe-table {
  .ant-btn {
    margin: 0 15px;
    color: var(--primary-color);
    position: relative;
    padding: 0;
    &::after {
      position: absolute;
      content: "";
      height: 14px;
      width: 1px;
      background: #dcdee2;
      right: -15px;
      top: 50%;
      transform: translateY(-50%);
    }
    &.del {
      color: var(--echart-pale-red);
    }
    &:last-child {
      &::after {
        display: none;
      }
    }
  }
}
</style>
